<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElRow, ElCol } from 'element-plus'
import { getCateApi } from '@/api/dashboard'
import { useRouter } from 'vue-router'
const { push } = useRouter()
import home3 from '@/assets/home/home3.png'
import home4 from '@/assets/home/home4.png'
import home5 from '@/assets/home/home5.png'
const Data = ref([])
const linkDataList = ref([])
const getSearchSupplierCateApi = async () => {
  const res = await getCateApi()
  Data.value = [
    {
      name: '待审批',
      routeName: res.data.event.company_order_count_one,
      img: home3
    },
    {
      name: '入库中',
      routeName: res.data.event.company_order_count_two,
      img: home4
    },
    {
      name: '已完成',
      routeName: res.data.event.company_order_count_third,
      img: home5
    }
  ]
  linkDataList.value = [
    {
      id: 1,
      name: '集团累计（家）',
      routeName: 0,
      icon: '0'
    },
    {
      id: 1,
      name: '企业累计（家）',
      routeName: res.data.base.company_count,
      icon: res.data.base.company_count_day
    },
    {
      id: 1,
      name: '经销商累计（家）',
      routeName: res.data.base.supplier_count_third,
      icon: res.data.base.supplier_count_third_day
    },
    {
      id: 1,
      name: '厂商累计（家）',
      routeName: res.data.base.supplier_count_for,
      icon: res.data.base.supplier_count_for_day
    },
    {
      id: 1,
      name: '供应商累计（家）',
      routeName: res.data.base.supplier_count_two,
      icon: res.data.base.supplier_count_two_day
    },
    {
      id: 1,
      name: '进货单累计',
      routeName: res.data.base.company_order_count,
      icon: res.data.base.company_order_count_day
    },
    {
      id: 1,
      name: '退货单累计',
      routeName: res.data.base.company_order_un_count,
      icon: res.data.base.company_order_un_count_day
    },
    {
      id: 1,
      name: '商品sku总计',
      routeName: res.data.base.goods_rules_count,
      icon: res.data.base.goods_rules_count_day
    }
  ]
}
onMounted(() => {
  getSearchSupplierCateApi()
})
const linkData = [
  {
    name: '数据管理',
    routeName: 'Record',
    icon: ''
  },
  {
    name: '单据管理',
    routeName: 'Document',
    icon: ''
  },
  {
    name: '财务管理',
    routeName: 'Finance',
    icon: ''
  },
  {
    name: '系统管理',
    routeName: 'System',
    icon: ''
  }
]
</script>

<template>
  <div class="body">
    <ElRow :gutter="20" justify="space-between">
      <ElCol :span="16">
        <ElCol :span="16" class="py-[10px]">
          <span class="text-[20px] font-500 text-rgba-36-37-38-1 mr-10px">实时概览</span>
          <span class="text-14px text-gray-500 text-right">以下为当日数据,实时更新</span>
        </ElCol>
        <ElRow justify="space-between" class="mt-20px">
          <ElCol
            :xl="6"
            :lg="6"
            :md="12"
            :sm="12"
            :xs="24"
            class="cursor-pointer"
            v-for="item in linkDataList"
            :key="item.id"
          >
            <div
              class="w-200px h-140px rounded-8px bg-gradient-to-b from-gray-100 to-white mb-20px p-30px box-border-box transition-colors duration-300 hover:text-[rgba(46,116,255,1)] hover:bg-gradient-to-b hover:from-blue-50 hover:to-white cursor-pointer"
            >
              <div class="text-[14px] font-400">{{ item.name }}</div>
              <div class="text-[32px] font-500 py-[10px]">{{ item.routeName }}</div>
              <div class="text-[16px] font-400"
                >今日 <span class="text-[16px] font-400">{{ item.icon }}</span></div
              >
            </div>
          </ElCol>
        </ElRow>
      </ElCol>
      <ElCol :span="8" class="py-[10px]">
        <div class="py-[10px] flex justify-between">
          <span class="text-[20px] font-500 text-rgba-36-37-38-1">常用功能</span>
          <span class="mr-50px"><img src="@/assets/home/home1.png" class="w-32px h-32px" /></span>
        </div>
        <ElRow
          :gutter="20"
          justify="space-between"
          class="w-564px h-204px rounded-8px bg-gradient-to-b from-[rgba(240,245,255,1)] to-[rgba(242,243,245,0)]"
        >
          <ElCol
            :xl="6"
            :lg="6"
            :md="12"
            :sm="12"
            :xs="24"
            class="cursor-pointer"
            v-for="item in linkData"
            :key="item.routeName"
          >
            <div
              class="mt-30px flex flex-col justify-center items-center"
              @click="push({ name: item.routeName })"
            >
              <span>
                <img src="@/assets/home/home2.png" class="w-58px h-58px" />
              </span>
              <p class="text-center">{{ item.name }}</p>
            </div>
          </ElCol>
        </ElRow>
        <!-- 11 -->
        <ElCol :span="16" class="py-[10px] mt-30px">
          <span class="text-[20px] font-500 text-rgba-36-37-38-1 mr-10px">待办单据</span>
          <span class="text-14px text-gray-500 text-right">以下为当日数据,实时更新</span>
        </ElCol>
        <div
          class="bg-center bg-cover w-564px h-150px mt-15px relative"
          v-for="item in Data"
          :key="item.routeName"
        >
          <span>
            <img :src="item.img" class="w-564px h-150px" />
          </span>
          <p class="text-[16px] font-400 text-white absolute top-20px left-45px">{{ item.name }}</p>
          <p class="text-[32px] font-400 text-white absolute top-40px left-45px">{{
            item.routeName
          }}</p>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<style scoped>
.body {
  min-width: 1800px;
  background-color: #fff;
  margin-top: -30px;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: -30px;
  padding: 30px;
  box-sizing: border-box;
}
</style>
